<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form
        ref="listQuery"
        :model="listQuery"
        :inline="true"
        label-position="top"
        @keydown.enter.native="handleFilter"
      >
        <search-item
          v-model="listQuery.userAccount"
          prop="name"
          label="姓名"
        ></search-item>
        <search-item
          v-model="listQuery.setId"
          type="select"
          prop="setName"
          label="套餐"
        >
          <template v-slot:select>
            <el-option
              v-for="item in mealList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </template>
        </search-item>
        <search-item
          v-model="listQuery.snackId"
          type="select"
          prop="snackName"
          label="小食"
        >
          <template v-slot:select>
            <el-option
              v-for="item in snacksList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </template>
        </search-item>
        <search-item v-model="time" type="daterange" prop="time"></search-item>
        <el-form-item>
          <el-button
            class="filter-item"
            type="primary"
            size="small"
            icon="el-icon-refresh-right"
            @click="handleReset"
          >
            重置
          </el-button>
          <el-button
            class="filter-item"
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="handleFilter"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        prop="id"
        label="序号"
        type="index"
        align="center"
        width="80"
      >
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center" width="120">
        <template v-slot="{ row }">
          <span>{{ row.userAccount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="temp" label="套餐" align="center">
        <template v-slot="{ row }">
          <span>{{ row.mealSet.setName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="temp" label="小食" align="center" width="200">
        <template v-slot="{ row }">
          <span>{{ row.mealSnack | checkSnack() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="temp" label="备注" align="center" width="250">
        <template v-slot="{ row }">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="temp" label="订餐时间" align="center" width="220">
        <template v-slot="{ row }">
          <span>{{ row.orderTime | formatT() }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template v-slot="{ row, $index }">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :current.sync="listQuery.current"
      :size.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { getOrder, deleteOrder } from "@/api/mealOrder";
import Pagination from "@/components/Pagination";
export default {
  name: "statistics",
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: [],
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20,
        setId: undefined,
        snackId: undefined,
        start: undefined,
        end: undefined
      },
      mealList: [],
      snacksList: [],
      time: undefined,
      total: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      if (this.time) {
        this.listQuery.start = this.time[0].toString();
        this.listQuery.end = this.time[1].toString();
      } else {
        this.listQuery.start = "1620554549902";
        this.listQuery.end = Date.parse(new Date()).toString();
      }
      getOrder(this.listQuery).then(res => {
        this.listLoading = false;
        this.list = res.data.records;
        console.log(this.list);
        this.total = res.data.total;
        for (const item of this.list) {
          this.mealList.push({
            value: item.mealSet.id,
            label: item.mealSet.setName
          });
          if (item.mealSnack) {
            this.snacksList.push({
              value: item.mealSnack.id,
              label: item.mealSnack.snackName
            });
          }
        }
        this.mealList = this.simpleArray(this.mealList);
        this.snacksList = this.simpleArray(this.snacksList);
        console.log(this.snacksList);
        console.log(this.mealList);
      });
    },
    //对象数组去重
    simpleArray(arr) {
      let obj = {};
      return arr.reduce((acc, cur) => {
        obj[cur.value] ? "" : (obj[cur.value] = true && acc.push(cur));
        return acc;
      }, []);
    },
    handleDelete(row, index) {
      this.listLoading = true;
      deleteOrder(row.id).then(res => {
        this.listLoading = false;
        this.list.splice(index, 1);
        this.$notify({
          title: "操作成功",
          message: "已删除",
          type: "success",
          duration: 2000
        });
      });
    },
    handleFilter() {
      this.getList();
    },
    handleReset() {
      this.$refs.listQuery.resetFields();
      this.time = undefined;
      this.getList();
    }
  }
};
</script>
